<template>
    <div>
        <div class="mdui-container" v-if="type==='recommend'">
            <div class="mdui-row">
                <h1>{{recommendTime}}</h1>
            </div>
            <div class="mdui-row">
                <div class="mdui-col-md-4 mdui-col-xs-12  article-list" v-for="item in recommendList[0]">
                    <div class="mdui-card article-title mdui-hoverable">
                        <div class="mdui-card-media">
                            <img :src="'http://192.168.13.158:8011/img/'+item.images[0]" />
                        </div>
                        <div class="mdui-card-primary" @click="toArticle(item.id)">
                            <div class="mdui-card-primary-title" style="cursor:pointer">{{item.title}}</div>
                        </div>
                        <div class="mdui-card-actions">
                            <button class="mdui-btn mdui-btn-icon mdui-float-right" @click="toArticle(item.id)">
                                <i class="mdui-icon material-icons">arrow_forward</i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mdui-container" v-if="type==='themes'">
            <div class="mdui-row">
                <h2>{{itemList.name}}</h2>
                <div class="mdui-subheading mdui-valign time">{{recommendTime}}</div>
            </div>
            <div class="mdui-row">
                <h2>
                    <small>{{itemList.description}}</small>
                </h2>
            </div>
            <div class="mdui-divider"></div>
            <div class="mdui-row">
                <div class="mdui-row">
                    <div class="mdui-col-md-4 mdui-col-xs-12  article-list" v-for="item in itemList.stories" v-if="item.type!=1">
                        <div class="mdui-card article-title mdui-hoverable">
                            <div class="mdui-card-media">
                                <img v-if="item.images" :src="'http://192.168.13.158:8011/img/'+item.images[0]" />
                            </div>
                            <div class="mdui-card-primary" @click="toArticle(item.id)">
                                <div class="mdui-card-primary-title" style="cursor:pointer">{{item.title}}</div>
                            </div>
                            <div class="mdui-card-actions">
                                <button class="mdui-btn mdui-btn-icon mdui-float-right" @click="toArticle(item.id)">
                                    <i class="mdui-icon material-icons">arrow_forward</i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mdui-fab-wrapper" v-if="type==='recommend'" id="main-fab" mdui-fab="{trigger: 'hover'}">
            <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
                <i class="mdui-icon material-icons">add</i>
                <i class="mdui-icon mdui-fab-opened material-icons">add</i>
            </button>
            <div class="mdui-fab-dial">
                <button mdui-tooltip="{content: '前一天', position: 'top'}" class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-teal" @click="prevRecommend">
                    <i class="mdui-icon material-icons">arrow_upward</i>
                </button>
                <button mdui-tooltip="{content: '后一天', position: 'top'}" class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-teal" @click="nextRecommend">
                    <i class="mdui-icon material-icons">arrow_downward</i>
                </button>
            </div>
        </div>
    </div>
</template>
<script>
import $ from "./../../libs/util.js";
export default {
  data() {
    return {
      type: "recommend",
      recommendList: [],
      dailyTime: "",
      recommendTime: "",
      recommendListTime: "",
      itemList: []
    };
  },
  methods: {
    getRecommendTime() {
      var date = new Date(this.dailyTime);
      this.recommendTime =
        date.getFullYear() +
        "年" +
        (date.getMonth() + 1) +
        "月" +
        date.getDate() +
        "日 ";
    },
    handleToRecommend() {
      this.type = "recommend";
      this.recommendList = [];
      this.dailyTime = $.getTodayTime();
      this.getRecommendList();
    },
    getRecommendList() {
      const prevDay = $.prevDay(this.dailyTime);
      $.ajax.get("news/before/" + prevDay).then(res => {
        this.recommendList.push(res.stories);
      });
      this.getRecommendTime();
    },
    prevRecommend() {
      this.recommendList = [];
      this.dailyTime = this.dailyTime - 86400000;
      this.getRecommendList();
    },
    nextRecommend() {
      this.recommendList = [];
      const tmp = $.getTodayTime();
      this.dailyTime = this.dailyTime + 86400000;
      if (this.dailyTime >= tmp) {
        this.dailyTime = tmp;
      }
      this.getRecommendList();
    },
    getList(id) {
      $.ajax.get("theme/" + id).then(res => {
        this.itemList = res;
      });
    },
    getPath(){
        this.recommendList=[];
        this.itemList=[];
        if(this.$route.params.type=="recommend"){
            this.type="recommend";
            this.handleToRecommend();
        }else if(this.$route.params.type=="themes"){
            this.type="themes";
            this.getList(this.$route.params.id);
        }
    },
    toArticle(id){
        this.$router.push({
            path: "/article/"+id,
        });
    }
  },
  watch:{
      "$route":"getPath"
  },
  mounted() {
      
        this.recommendList=[];
        this.itemList=[];
        if(this.$route.params.type=="recommend"){
            this.type="recommend";
            this.handleToRecommend();
        }else if(this.$route.params.type=="themes"){
            this.type="themes";
            this.getList(this.$route.params.id);
        }
  }
};
</script>
